<template>
  <div>
    <table>
      <tr v-for="(item, index) in list" :key="index">
        <td>
          <input type="number" v-model.number="item.count" />
        </td>
        <td>
          <span>{{ item.name }}</span>
        </td>
        <td><span v-show="item.count === 0">卖光了!!!</span></td>
      </tr>
    </table>

    <p>All Number:{{ AllCount }}</p>
  </div>
</template>

<script>
export default {
  props: ["list"],
  computed: {
    AllCount() {
      return this.list.reduce((sum, item) => {
        return sum + item.count;
      }, 0);
    },
  },
  watch: {
    list: {
      handler() {
        this.list.forEach((item) => {
          if (item.count <= 0) {
            item.count = 0;
          }
        });
      },
      deep: true,
    },
  },
};
</script>

<style>
</style>